<template>
    <div class="app">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>添加账号</span>
                </div>
            </template>
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                class="demo-ruleForm">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="ruleForm.account" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="用户组" prop="role">
                    <el-select v-model="ruleForm.userGroup" placeholder="请选择身份">
                        <el-option label="普通管理员" value="普通管理员" />
                        <el-option label="超级管理员" value="超级管理员" />
                    </el-select>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="submitForm">添加</el-button>
                    <el-button size="" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { accUserAdd } from "../../api/apis.ts"

import { checkAccReg, checkPassReg } from "../../utils/reg.ts";

// console.log(ruleFormRef);

const ruleForm = reactive({
    account: '',
    password: '',
    userGroup: ''
})


// 触发函数--验证账号
let validateAcc = (rule: any, value: any, callback: any) => {
    console.log(rule)
    if (value === "") {
        callback(new Error("请输入账号"))
    } else if (!checkAccReg(value)) {
        callback(new Error("账号格式不对"))
    } else {
        callback();
    }
}

const validatePass = (rule: any, value: any, callback: any) => {
    console.log(rule)
    if (value === '') {
        callback(new Error('请输入密码'))
    } else if (!checkPassReg(value)) {
        callback(new Error("密码格式不对"))
    } else {
        callback()
    }
}
const rules = reactive<any>({
    account: [{ validator: validateAcc, trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }],
    userGroup: {
        required: true,
        message: "你没有选分组",
        trigger: "change",
    },
})

const ruleFormRef = ref()

const submitForm = () => {
    ruleFormRef.value.validate(async (valid: any) => {
        if (valid) {
            console.log('submit!')
            let res = await accUserAdd({
                account: ruleForm.account,
                password: ruleForm.password,
                userGroup: ruleForm.userGroup
            })
            console.log(res.data);

        } else {
            console.log('error submit!')
            return false
        }
        // 清空
        ruleFormRef.value.resetFields();
        ruleForm.userGroup = ""
    })
}
// 点击重置按钮
let resetForm = () => {
    ruleFormRef.value.resetFields();
    ruleForm.userGroup = ""
}

</script>

<style scoped lang="scss">
.app {
    width: 100%;
    padding-top: 20px;
    padding: 10px;
}

::v-deep .el-input {
    width: 200px;
}
</style>